<!DOCTYPE html>
<html>
<head>
    <title>Color Mapping Test</title>
    <style>
        body { font-family: Arial, sans-serif; padding: 20px; }
        .color-test { display: flex; align-items: center; margin: 10px 0; }
        .color-box { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; }
        h2 { margin-top: 30px; }
    </style>
</head>
<body>
    <h1>Graph Visualization Color Mapping Test</h1>

    <h2>Node Colors by Type</h2>
    <div class="color-test">
        <div class="color-box" style="background: #ef4444;"></div>
        <span><strong>Center Node</strong> - The main node being visualized</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #FF6B6B;"></div>
        <span><strong>API</strong> - API layer components (*/api/*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #4ECDC4;"></div>
        <span><strong>Business Logic</strong> - Business layer (*/biz/*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #45B7D1;"></div>
        <span><strong>Data Access Layer</strong> - DAL components (*/dal/*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #96CEB4;"></div>
        <span><strong>Dependencies</strong> - External dependencies (*/dependency/*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #DDA0DD;"></div>
        <span><strong>Services</strong> - Service classes (*service*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #98D8C8;"></div>
        <span><strong>Repository</strong> - Repository classes (*repository*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #FFB6C1;"></div>
        <span><strong>Mapper</strong> - Mapper classes (*mapper*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #FFD93D;"></div>
        <span><strong>DTOs</strong> - Data Transfer Objects (*dto*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #A9A9A9;"></div>
        <span><strong>Tests</strong> - Test files (*/test/*)</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #95A5A6;"></div>
        <span><strong>Default</strong> - Other components</span>
    </div>

    <h2>Edge Colors by Type</h2>
    <div class="color-test">
        <div class="color-box" style="background: #848484; border-radius: 0; height: 3px; width: 50px;"></div>
        <span><strong>Dependency</strong> - Standard dependency relationship</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #667eea; border-radius: 0; height: 3px; width: 50px;"></div>
        <span><strong>Invokes</strong> - Method invocation</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #10b981; border-radius: 0; height: 3px; width: 50px;"></div>
        <span><strong>Extends</strong> - Class extension</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #ef4444; border-radius: 0; height: 3px; width: 50px;"></div>
        <span><strong>Implements</strong> - Interface implementation</span>
    </div>
    <div class="color-test">
        <div class="color-box" style="background: #f59e0b; border-radius: 0; height: 3px; width: 50px;"></div>
        <span><strong>Uses</strong> - General usage relationship</span>
    </div>

    <h2>Live Test Results</h2>
    <div id="testResults"></div>

    <script>
        // Test the color functions
        const nodeColorScheme = {
            'api': '#FF6B6B',
            'biz': '#4ECDC4',
            'dal': '#45B7D1',
            'dependency': '#96CEB4',
            'controller': '#FECA57',
            'service': '#DDA0DD',
            'repository': '#98D8C8',
            'mapper': '#FFB6C1',
            'test': '#A9A9A9',
            'dto': '#FFD93D',
            'default': '#95A5A6'
        };

        function getNodeColor(nodeId, isCenter = false) {
            if (isCenter) return '#ef4444';
            const lowerNodeId = nodeId.toLowerCase();
            if (lowerNodeId.includes('/api/')) return nodeColorScheme.api;
            if (lowerNodeId.includes('/biz/')) return nodeColorScheme.biz;
            if (lowerNodeId.includes('/dal/')) return nodeColorScheme.dal;
            if (lowerNodeId.includes('/dependency/')) return nodeColorScheme.dependency;
            if (lowerNodeId.includes('controller')) return nodeColorScheme.controller;
            if (lowerNodeId.includes('service')) return nodeColorScheme.service;
            if (lowerNodeId.includes('repository')) return nodeColorScheme.repository;
            if (lowerNodeId.includes('mapper')) return nodeColorScheme.mapper;
            if (lowerNodeId.includes('/test/')) return nodeColorScheme.test;
            if (lowerNodeId.includes('dto')) return nodeColorScheme.dto;
            return nodeColorScheme.default;
        }

        // Test cases
        const testCases = [
            'business-payout-api/src/main/java/com/pingpongx/business/payout/api/dto/request',
            'business-payout-biz/src/main/java/com/pingpongx/business/payout/biz/service/fee/FeeConfigDTO.java',
            'business-payout-dal/src/main/java/com/pingpongx/business/payout/dal/dataobject',
            'business-payout-dependency/src/main/java/com/pingpongx/business/payout/dependency/user/UserClient.java',
            'business-payout-biz/src/test/java/com/pingpongx/business/payout/biz/support/OrderHelperTest.java'
        ];

        const resultsDiv = document.getElementById('testResults');
        testCases.forEach(testCase => {
            const color = getNodeColor(testCase);
            const div = document.createElement('div');
            div.className = 'color-test';
            div.innerHTML = `
                <div class="color-box" style="background: ${color};"></div>
                <span><code>${testCase.substring(0, 50)}...</code> → ${color}</span>
            `;
            resultsDiv.appendChild(div);
        });
    </script>
</body>
</html>